<template>
  <view class="classifyList">
    <uv-skeletons :loading="!classifyList.length && more" :skeleton="skeleton">
      <view class="content">
        <navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in classifyList"
          :key="item._id">
          <image :src="item.smallPicurl" mode="aspectFill" class="pic" />
        </navigator>
      </view>
    </uv-skeletons>
    <!-- <loading-more status="loading" v-if="!classifyList.length && more"></loading-more> -->

    <loading-more :status="more ? loading ? 'loading' : 'more' : 'no-more'"
      v-if="classifyList.length || !more"></loading-more>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { storeToRefs } from 'pinia'
  import type { ClassifyWallList } from '@/api/classify';
  import {  apiGetClassifyWallList } from '@/api/classify';
  import { onLoad, onUnload, onReachBottom, onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  import { useClassifyListStore } from '@/stores/classifyList';
  import { apiUserWallList } from '@/api/user';

  const store = useClassifyListStore()
  // `name` 和 `doubleCount` 是响应式的 ref
  // 同时通过插件添加的属性也会被提取为 ref
  // 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
  // const { list } = storeToRefs(store)
  // 作为 action 的 increment 可以直接解构
  const { setList } = store

  const pageNum = ref(1);
  const pageSize = ref(12);
  const more = ref(true);
  const loading = ref(false);
  const queryParams = ref<{ id ?: string; name : string; type ?: 'score' | 'download' }>();
  const classifyList = ref<ClassifyWallList[]>([]);
  const skeleton = Array(4).fill([{
    type: 'flex',
    children: [{
      type: 'custom',
      style: 'width: calc((100vw - 20rpx) / 3);height:440rpx;margin:0 5rpx;'
    }, {
      type: 'custom',
      style: 'width: calc((100vw - 20rpx) / 3);height:440rpx;'
    }, {
      type: 'custom',
      style: 'width: calc((100vw - 20rpx) / 3);height:440rpx;margin:0 5rpx;'
    }]
  }, 5]).flat(1)

  const getListByType = () => {
    if (queryParams.value.id) {
      return apiGetClassifyWallList({
        classid: queryParams.value.id,
        pageNum: pageNum.value,
        pageSize: pageSize.value
      })
    }

    return apiUserWallList({
      type: queryParams.value.type,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    })
  }

  const getClassify = async () => {
    loading.value = true
    const res = await getListByType()
    loading.value = false
    classifyList.value = [...classifyList.value, ...res.data]
    more.value = res.total ? classifyList.value.length < res.total : res.data.length === pageSize.value
    setList(classifyList.value)
  }

  onLoad(({ id, name, type } : { id ?: string; name : string; type ?: 'score' | 'download' }) => {
    if (!id && !type) {
      return uni.reLaunch({
        url: '/pages/index/index'
      })
    }
    queryParams.value = {
      id,
      name,
      type,
    }
    uni.setNavigationBarTitle({
      title: name
    })
    getClassify()
  })
  onReachBottom(() => {
    if (!more.value) {
      uni.showToast({
        title: '已经到底啦',
        icon: 'none'
      })
      return
    }
    pageNum.value++
    getClassify()
  })

  onPullDownRefresh(async () => {
    classifyList.value = []
    pageNum.value = 1
    more.value = true
    await getClassify()
    uni.stopPullDownRefresh()
  })
  onUnload(() => {
    setList([])
  })
  onShareAppMessage(() => {
    return {
      title: queryParams.value.name,
      path: `pages/classifyList/classifyList?id=${queryParams.value.id}&name=${queryParams.value.name}`,
    }
  })
  // onShareTimeline(() => {
  //   return {
  //     title: queryParams.value.name,
  //     query: `id=${queryParams.value.id}&name=${queryParams.value.name}`
  //   }
  // })
</script>

<style lang="scss" scoped>
  .classifyList {

    .content {
      padding: 5rpx;
      display: grid;
      gap: 5rpx;
      grid-template-columns: repeat(3, 1fr);

      .item {
        height: 440rpx;

        .pic {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
</style>